<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>考试管理</title>
  <!-- 引入 Font Awesome 字体图标库（在线 CDN 方式，解决图标显示问题） -->
  <link rel="stylesheet" href="../../static/css/all.min.css">
  <style>
    :root {
      --primary-color: #4361ee;
      --secondary-color: #3f37c9;
      --accent-color: #4895ef;
      --light-color: #f8f9fa;
      --dark-color: #212529;
      --success-color: #4cc9f0;
      --warning-color: #f8961e;
      --danger-color: #f72585;
      --border-radius: 8px;
      --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      --border-color: #e0e0e0;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    th,td,tr{
      text-align: center;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f7fa;
      color: var(--dark-color);
      line-height: 1.6;
      padding: 20px;
    }

    .plan-management-container {
      max-width: 1400px;
      margin: 0 auto;
      background: white;
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);
      overflow: hidden;
    }

    /* 搜索及生成栏样式 */
    .search-container {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      padding: 20px;
      background: white;
      border-bottom: 1px solid var(--border-color);
      align-items: center;
    }

    .generate-btn {
      padding: 10px 20px;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .generate-btn:hover {
      background-color: var(--secondary-color);
    }

    .search-box {
      flex: 1;
      min-width: 200px;
      position: relative;
    }

    .search-box input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      font-size: 14px;
      transition: all 0.3s;
    }

    .search-box input:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
      outline: none;
    }

    .search-box i {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #adb5bd;
    }

    .search-btn {
      padding: 10px 20px;
      background-color: var(--success-color);
      color: white;
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .search-btn:hover {
      background-color: #3ab7d8;
    }

    /* 表格样式 */
    .plan-table {
      width: 100%;
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    thead {
      background-color: var(--primary-color);
      color: white;
    }

    th {
      padding: 15px;
      text-align: center;
      font-weight: 500;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    tbody tr {
      border-bottom: 1px solid var(--border-color);
      transition: all 0.2s ease;
    }

    tbody tr:hover {
      background-color: rgba(67, 97, 238, 0.05);
    }

    td {
      padding: 15px;
      color: #495057;
      font-size: 14px;
      vertical-align: middle;
    }

    /* 操作按钮样式 */
    .action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
      margin-right: 5px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      background: none;
      cursor: pointer;
      color: #adb5bd;
      transition: all 0.2s ease;
    }

    .action-btn:hover {
      background-color: #f0f0f0;
      color: var(--primary-color);
    }

    /* 分页器样式 */
    .pagination-container {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 20px;
      background: white;
      border-top: 1px solid var(--border-color);
      gap: 10px;
    }

    .pagination-controls {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .page-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      background: none;
      cursor: pointer;
      transition: all 0.2s;
    }

    .page-btn:hover {
      border-color: var(--primary-color);
      color: var(--primary-color);
    }

    .page-btn.active {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      color: white;
    }

    .page-btn.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .page-input {
      width: 60px;
      height: 36px;
      text-align: center;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      margin: 0 10px;
    }

    .page-size-selector {
      margin-left: 10px;
    }

    .page-size-select {
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 3px;
      background: #fff;
      cursor: pointer;
      outline: none;
      transition: border-color 0.2s;
    }

    .page-size-select:hover {
      border-color: #999;
    }

    .page-size-select:focus {
      border-color: #1890ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }

    .page-size-select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 16px;
      padding-right: 28px;
    }

    .change {
      width: 50px;
    }

    .page-input {
      outline: none;
    }

    .page-input:focus {
      border-color: #1890ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }

    /* 基础按钮样式 */
    .action-btn {
      padding: 8px 12px;
      margin: 0 5px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: white;
    }

    /* 图标样式 */
    .action-btn i {
      margin-right: 6px;
      font-size: 14px;
    }

    /* 预览按钮 */
    .preview-exam {
      background-color: #2196F3; /* 蓝色 */
    }

    .preview-exam:hover {
      background-color: #0b7dda;
    }

    /* 发布考试按钮 */
    .publish-exam {
      background-color: #ff9800; /* 橙色 */
    }

    .publish-exam:hover {
      background-color: #e68a00;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    #confirmModal {
      z-index: 1001; /* 比 analysisModal 更高 */
    }
    .confirmModal{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    /* 正确提示框样式 */
    .alert-success {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 15px 20px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      max-width: 80%;
      animation: slideIn 0.3s ease-out forwards;
    }
    .alert-danger {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 15px 20px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      border: 1px solid #c3e6cb;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      max-width: 80%;
      animation: slideIn 0.3s ease-out forwards;
    }
    .alert-success i {
      margin-right: 10px;
      font-size: 18px;
    }

    .alert-close {
      margin-left: 15px;
      background: none;
      border: none;
      color: inherit;
      font-size: 20px;
      cursor: pointer;
      padding: 0 0 0 10px;
      line-height: 1;
    }

    /* 动画效果 */
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translate(-50%, -30px);
      }
      to {
        opacity: 1;
        transform: translate(-50%, 0);
      }
    }

    @keyframes slideOut {
      from {
        opacity: 1;
        transform: translate(-50%, 0);
      }
      to {
        opacity: 0;
        transform: translate(-50%, -30px);
      }
    }
    .analysis-content {
      min-height: 120px;
      padding: 16px;
      background-color: #f8f9fa;
      border-radius: 8px;
      border-left: 4px solid #4361ee;
      margin: 16px 0;
      font-size: 14px;
      line-height: 1.6;
      color: #495057;
    }
    /*    预览弹框*/
    .analysis-content {
      max-height: 400px;
      overflow-y: auto;
      margin-bottom: 20px;
      padding: 20px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
    }
    .elegant-report {
      font-family: "Helvetica Neue", sans-serif;
      line-height: 1.8;
    }
    .elegant-report strong {
      color: #2c3e50;
      font-weight: 600;
      background: linear-gradient(transparent 60%, #F0F7FF 40%);
    }
    .modal-content {
      background-color: white;
      padding: 32px;
      border-radius: 12px;
      width: 100%;
      max-width: 520px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
      position: relative;
      animation: modalFadeIn 0.3s ease-out;
      border: 1px solid rgba(0,0,0,0.05);
    }
    .modal-content {
      background-color: white;
      padding: 25px;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      width: 500px;
      position: relative;
      animation: fadeIn 0.3s;
    }
    .close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 24px;
      cursor: pointer;
      color: #adb5bd;
      transition: all 0.2s ease;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;

    }
    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .close-btn:hover {
      color: #e74c3c;
      background-color: #f8f9fa;
    }
    .btn-primary {
      background-color: var(--primary-color);
      color: white;
    }

    .btn-primary:hover {
      background-color: var(--secondary-color);
    }
    .btn-cancel {
      padding: 8px 20px;
      background-color: #ecf0f1;
      color: #7f8c8d;
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
    }

    .btn-cancel:hover {
      background-color: #d5dbdb;
    }
    .status-badge {
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: bold;
    }

    /* 已发布 - 绿色 */
    .status-badge[data-status="已发布"] {
      background-color: #4CAF50;
      color: white;
    }

    /* 已完成 - 蓝色 */
    .status-badge[data-status="进行中"] {
      background-color: #2196F3;
      color: white;
    }

    /* 待批改 - 橙色 */
    .status-badge[data-status="已结束"] {
      background-color: #FF9800;
      color: white;
    }

    /* 待发布 - 红色 */
    .status-badge[data-status="未开始"] {
      background-color: #F44336;
      color: white;
    }
    /* 正确提示框样式 */
    .alert-success {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 15px 20px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      max-width: 80%;
      animation: slideIn 0.3s ease-out forwards;
    }
    .alert-danger {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 15px 20px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      border: 1px solid #c3e6cb;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      max-width: 80%;
      animation: slideIn 0.3s ease-out forwards;
    }
    .alert-success i {
      margin-right: 10px;
      font-size: 18px;
    }

    .alert-close {
      margin-left: 15px;
      background: none;
      border: none;
      color: inherit;
      font-size: 20px;
      cursor: pointer;
      padding: 0 0 0 10px;
      line-height: 1;
    }

    /* 动画效果 */
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translate(-50%, -30px);
      }
      to {
        opacity: 1;
        transform: translate(-50%, 0);
      }
    }

    @keyframes slideOut {
      from {
        opacity: 1;
        transform: translate(-50%, 0);
      }
      to {
        opacity: 0;
        transform: translate(-50%, -30px);
      }
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  </style>
</head>

<body>
<div class="alert alert-danger" style="display: none;">
  <i class="fas fa-exclamation-circle"></i>
  <span id="error-message" class="errorMessage">修改失败</span>
</div>
<!-- 正确提示框 -->
<div class="alert alert-success" id="success-alert" style="display: none;">
  <i class="fas fa-check-circle"></i>
  <span id="success-message">试卷已发布</span>
  <button class="alert-close">&times;</button>
</div>
<div class="plan-management-container">
  <div class="search-container">
    <button class="generate-btn" id="generateBtn">
      <i class="fas fa-plus"></i>
      生成考试
    </button>
    <div class="search-box">
      <i class="fas fa-search"></i>
      <input type="text" placeholder="请输入考试名称..." class="search-lesson-plan">
    </div>
    <button class="search-btn" id="searchBtn">
      <i class="fas fa-search"></i>
      搜索
    </button>
  </div>

  <!-- 考试表格 -->
  <div class="plan-table">
    <table>
      <thead>
      <tr>
        <th>ID</th>
        <th>考试名称</th>
        <th>创建时间</th>
        <th>创建人</th>
        <th>考试时间</th>
        <th>考试发布状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody class="tbody">
      <!-- 可后续通过 JS 动态填充，这里放静态示例数据 -->
      <tr>
        <td>1</td>
        <td>数学月考</td>
        <td>2025-07-25 09:00:00</td>
        <td>张老师</td>
        <td>0</td>
        <td>
          <button class="action-btn preview-exam" title="预览">
            <i class="fas fa-eye"></i> 预览
          </button>
          <button class="action-btn publish-exam" title="发布考试">
            <i class="fas fa-paper-plane"></i> 发布考试
          </button>
        </td>
      </tr>

      </tbody>
    </table>
  </div>

  <!-- 分页器 -->
  <div class="pagination-container">
    <div class="pagination-controls pagination-controls1">
      <button class="page-btn first">
        <i class="fas fa-angle-double-left"></i>
      </button>
      <button class="page-btn front">
        <i class="fas fa-angle-left"></i>
      </button>
      <div class="page-number" style="display: flex">
        <button class="page-btn active">1</button>
        <button class="page-btn">2</button>
        <button class="page-btn">3</button>
        <span>...</span>
        <button class="page-btn">12</button>
      </div>
      <button class="page-btn next">
        <i class="fas fa-angle-right"></i>
      </button>
      <button class="page-btn end">
        <i class="fas fa-angle-double-right"></i>
      </button>
    </div>
    <div class="page-size-selector">
      <select class="page-size-select">
        <option value=5>5条/页</option>
        <option value=10>10条/页</option>
        <option value=20>20条/页</option>
        <option value=50>50条/页</option>
        <option value=100>100条/页</option>
      </select>
    </div>
    <input type="number" class="page-input" placeholder="页码" min="1" step="1">
    <button class="page-btn change">跳转</button>
  </div>
</div>

<!-- 引入 jQuery -->
<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/jquery.cookie.js"></script>
<script src="../../static/js/exma_management.js"></script>
<script>
</script>
</body>
</html>